<template>
	<view>
		<!-- 扫码页面 -->
		<view style="position: fixed;width: 100%;height: 460px;bottom: 0;">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barcode: null,
				flash: false,
				tip: '将二维码放入框中，即可自动扫描',
			}
		},
		onShow() {
			// 页面展示时，重新启动扫描检测
			if (this.barcode) {
				console.log('onShow')
				// this.barcode.start()
			}
		},
		async mounted() {
			try{
				// plus.navigator.setFullscreen(true); //全屏
				// 创建相机
				let currentWebview = this.$mp.page.$getAppWebview();
				this.createBarcode(currentWebview)
				// this.createTipInfoView(currentWebview)
				this.createFlashBarView(currentWebview)
			}catch(error){
				console.log(error)
			}
		},
		methods: {
			/**
             * 创建二维码
             * @param {Object} currentWebview
             */
			createBarcode(currentWebview) {
				if (!this.barcode) {
					//条码类型常量数组，默认情况支持QR、EAN13、EAN8类型。 通过此参数可设置扫码识别支持的条码类型（注意：设置支持的条码类型越多，扫描识别速度可能将会降低）
					this.barcode = plus.barcode.create('barcode', [plus.barcode.QR,plus.barcode.CODABAR,plus.barcode.UPCA,plus.barcode.CODE39,plus.barcode.CODE93,plus.barcode.CODE128], {
						top: '75px',
						left: '0px',
						height: '290px',
						width: '100%',
						position: 'absolute',
						background: '#808080',
						frameColor: '#fff',
						scanbarColor: '#FFCC33',
						filters:[0,7,5,8,9,10]
					});
					this.barcode.onmarked = this.onmarked;
					this.barcode.setFlash(this.flash);
					//此处未演示扫码成功回调的地址设置，实际请参考HTML5Plus API自行处理
					//注意扫码区域需为正方形，否则影响扫码识别率
					currentWebview.append(this.barcode);
				}
				console.log('createBarcode')
				this.barcode.start()
			},

			/**
			 * 创建提示信息
			 * @param {Object} currentWebview
			 */
			createTipInfoView(currentWebview) {
				const content = new plus.nativeObj.View('content', {
						top: '0px',
						left: '0px',
						height: '100%',
						width: '100%'
					},
					[{
						tag: 'font',
						id: 'scanTips',
						text: this.tip,
						textStyles: {
							size: '14px',
							color: '#ffffff',
							whiteSpace: 'normal'
						},
						position: {
							top: '90px',
							left: '10%',
							width: '80%',
							height: 'wrap_content'
						}
					}]);
				currentWebview.append(content);

			},
			// 创建 开关灯按钮
			createFlashBarView(currentWebview) {
				const openImg = this.crtFlashImg('static/yellow-scanBar.png')
				const closeImg = this.crtFlashImg('static/scanBar.png')
				const scanBarVew = new plus.nativeObj.View('scanBarVew', {
						top: '30%',
						left: '40%',
						height: '16%',
						width: '20%',
					},
					closeImg);
				scanBarVew.interceptTouchEvent(true);

				currentWebview.append(scanBarVew);

				scanBarVew.addEventListener("click", (e) => { //点亮手电筒
					this.flash = !this.flash;
					if (this.flash) {
						scanBarVew.draw(openImg);
					} else {
						scanBarVew.draw(closeImg)
					}
					if (this.barcode) {
						this.barcode.setFlash(this.flash);
					}
				}, false)
			},
			crtFlashImg(imgsrc) {
				return [{
					tag: 'img',
					id: 'scanBar',
					src: imgsrc,
					position: {
						width: '28%',
						left: '36%',
						height: '30%'
					}
				}, {
					tag: 'font',
					id: 'font',
					text: '轻触照亮',
					textStyles: {
						size: '12px',
						color: '#ffffff'
					},
					position: {
						width: '80%',
						left: '10%'
					}
				}]
			},
			// 扫码成功回调
			onmarked(type, result) {
				this.barcode.cancel()
				this.$emit('getCode',result)
				// 3秒后再次执行扫码
				setTimeout(()=>{
					console.log('onmarked')
					this.barcode.start()
				},2000)
			}
		},

	}
</script>

<style scoped lang="scss">

</style>
